<template>
	<article class="page page-chinese2pinyin">
		<h4 class="text-center">汉字转拼音读物</h4>
		<form class="page-body">
			<div class="row">
				<div class="col-4 left">
					<fieldset>
						<legend>参数配置</legend>
						<div class="fieldset-content">
							<div class="form-group">
								<div class="alert alert-info">
									若遇到多音字转换错误的情况，可通过双击转换结果中的拼音，对内容进行修改。
								</div>
							</div>
							<div class="form-group form-check form-check-inline">
								<label class="form-check-label">标记声调</label>
								<input class="form-check-input" type="checkbox" v-model="hasTone">
							</div>
							<div class="form-group form-group-main">
								<label class="col-form-label">汉字文本</label>
								<textarea class="form-control" v-model.trim="chineseText" placeholder="请输入汉字文本"></textarea>
							</div>
							<div class="form-group">
								<x-button type="primary" block @click="submitHandler">汉字转拼音读物</x-button>
							</div>
						</div>
					</fieldset>
				</div>
				<div class="col-8 right">
					<fieldset>
						<legend>转换结果</legend>
						<div class="fieldset-content">
							<div class="form-group result-wrapper" ref="resultWrapper">
								<span class="word" v-for="(v,i) in pinyinArr" :key="i" @dblclick.prevent="editWordStart(i)">
									<span class="word-pinyin">{{ v }}</span>
									<span class="word-chinese">{{ chineseText[i] }}</span>
								</span>
							</div>
							<div class="form-group">
								<x-button type="primary" block @click="printDoc">打印为PDF</x-button>
							</div>
							<iframe ref="iframe"></iframe>
						</div>
					</fieldset>
				</div>
			</div>
		</form>
        <!-- 修改单个拼音 -->
        <cmpMessageBox ref="cmpMessageBox" title="修改拼音" width="50vw" height="28.87vw" padding="2vw 3.5vw 1.75vw">
            <div slot="body" class="msgbox-body-content">
				<div class="form-group textarea-wrapper">
					<textarea v-model.trim="pinyinNew" placeholder="输入新的拼音内容"></textarea>
				</div>
				<div class="form-group form-check form-check-inline">
					<input class="form-check-input" type="checkbox" v-model="isBatch">
					<label class="form-check-label">适配文本中所有相同文字</label>
				</div>
            </div>
            <div slot="footer" class="text-center">
                <x-button type="brown" size="small" @click="closeMessageBox" plain>取消</x-button>
                <x-button type="brown" size="small" @click="confirmMessageBox">确定</x-button>
            </div>
        </cmpMessageBox>
	</article>
</template>

<script>
import cmpMessageBox from '@/components/cmp-message-box.vue'
let pinyin = (global.pinyinPro || {}).pinyin || null
let templateStr = require('./template.js')

export default {
	name: 'chinese2pinyin',
    components: {
        cmpMessageBox,
    },
	data () {
		return {
			hasTone: true,
			isBatch: false,
			chineseText: '',
			pinyinArr: [],
			pinyinNew: '',
			editActiveIndex: -1,
			loadingCount: 0
		}
	},
	mounted () {
	},
	methods: {
		// 汉字转拼音读物
		submitHandler () {
			let options = { type: 'array' }
			if (!this.hasTone) { options.toneType = 'none' }
			this.pinyinArr = pinyin(this.chineseText, options)
		},
		// 修改单个拼音
		editWordStart (index) {
			this.editActiveIndex = index
			this.pinyinNew = this.pinyinArr[index] || ''
			this.$refs.cmpMessageBox && this.$refs.cmpMessageBox.show()
		},
        closeMessageBox() {
            this.$refs.cmpMessageBox && this.$refs.cmpMessageBox.close()
        },
        confirmMessageBox() {
			if (this.isBatch) {
				let word = this.chineseText[this.editActiveIndex]
				let start = 0
				let flag = true
				while (flag) {
					let index = this.chineseText.indexOf(word, start)
					if (index === -1) {
						flag = false
					} else {
						this.$set(this.pinyinArr, index, this.pinyinNew)
						start = index + 1
					}
				}
			} else {
				this.$set(this.pinyinArr, this.editActiveIndex, this.pinyinNew)
			}
            this.closeMessageBox()
        },
		printDoc () {
			if (!this.$refs.resultWrapper) return
			if (!this.$refs.iframe || !this.$refs.iframe.contentWindow) return
			let words = [...(this.$refs.resultWrapper.querySelectorAll('.word') || [])]
			if (words.length === 0) {
				this.$toast('未检测到可打印的内容')
				return
			}
			let bodyContent = templateStr
			let bodyContentArr = []
			for (let i = 0; i < words.length; i++) {
				let i1 = Math.floor(i / 96)
				if (!bodyContentArr[i1]) {bodyContentArr[i1] = []}
				bodyContentArr[i1].push(words[i].outerHTML)
			}
			bodyContentArr.forEach(v => {
				bodyContent += `<div class="page">${v.join('')}</div>`
			})
			this.$refs.iframe.contentDocument.body.innerHTML = bodyContent
			this.$refs.iframe.contentWindow.print()
		}
	},
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.page-chinese2pinyin {
	display: flex;
	flex-direction: column;
	fieldset {
		height: 100%;
		.fieldset-content {
			height: calc(100% - 2em);
			display: flex;
			flex-direction: column;
		}
	}
	.page-body {
		height: 0;
		flex-grow: 1;
		& > .row {
			height: 100%;
		}
		.left {
			.alert {margin-bottom: 0;}
			.form-group-main {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				textarea {
					flex-grow: 1;
				}
			}
		}
		.right {
			iframe {
				position: fixed;
				left: 110vw;
				top: 110vh;
			}
			.result-wrapper {
				height: 0;
				flex-grow: 1;
				padding: 1vw;
				border-radius: .5vw;
				background-color: #fff;
				overflow: hidden auto;
				text-align: justify;
			}
			.word { display: inline-block; width: 2.5cm; font-size: .7cm; text-align: center; }
			.word + .word {margin-top: .5cm;}
			.word-pinyin, .word-chinese { display: block; line-height: 1.5; }
		}
	}
	.cmp-message-box {
		.msgbox-body-content {
			height: 100%;
			display: flex;
			flex-direction: column;
			.textarea-wrapper {
				height: 0;
				flex-grow: 1;
			}
			textarea {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: .5em;
				border-color: @borderGrey;
				resize: none;
			}
		}
		.x-button {
			margin: 0 10px;
		}
	}
}
</style>
